<template>
  <ContainerGroup>
    <Container>
      <div class="form">
        <p>
          <span class="bed-title">操作时间：</span>
          <span>
            <el-date-picker
              v-model="ruleForm.timeDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              size="mini"
            />
          </span>
        </p>
        <p style="display: flex;align-items: center;justify-content: space-between;width:130px">
          <Button
            icon="search"
            @click="handerSearch"
          >查询</Button>
          <Button
            icon="reset"
            type="info"
            @click="handlerReset"
          >重置</Button>
        </p>
      </div>
    </Container>
    <Container height="fill" :scroll-y="true" display="flexY">
      <OperationContainer align="right" style="margin-bottom: 10px">
        <Button
          icon="export"
          @click="_DownLoad"
        >导出</Button>
      </OperationContainer>
      <div ref="main1" style="float:left;width:100%;height: 500px" />
    </Container>
  </ContainerGroup>
</template>
<script>
import * as echarts from 'echarts'
import { getDeptUsedBedReportDTO, getDeptUsedBedReportDtoExcel } from '../../utils/apis/registrationApi.js'
export default {
  data() {
    return {
      deptarr: [],
      ruleForm: {
        timeDate: []
      }
    }
  },
  mounted() {
    this.getTime()
    this.getList()
  },
  methods: {
    getTime() {
      const nowdays = new Date()
      let year = nowdays.getFullYear()
      let month = nowdays.getMonth()
      if (month === 0) {
        month = 12
        year = year - 1
      }
      if (month < 10) {
        month = '0' + month
      }
      const myDate = new Date(year, month, 0)
      const startDate = year + '-' + month + '-01 00:00:00' // 上个月第一天
      const endDate = year + '-' + month + '-' + myDate.getDate() + ' 23:59:00'// 上个月最后一天
      this.ruleForm.timeDate = [startDate, endDate]
    },
    // 获取患者列表参数
    getListParams() {
      const params = {
        startTime:
            this.ruleForm.timeDate === '' || this.ruleForm.timeDate === null
              ? ''
              : this.ruleForm.timeDate[0], // 预约时间开始
        endTime:
            this.ruleForm.timeDate === '' || this.ruleForm.timeDate === null
              ? ''
              : this.ruleForm.timeDate[1] // 预约时间结束
      }
      return params
    },
    getList() {
      const params = this.getListParams()
      this.deptarr = []
      getDeptUsedBedReportDTO(params).then((res) => {
        if (res.data.code === 200) {
          res.data.data.forEach(item => {
            const obj = {
              value: item.num,
              name: item.deptName
            }
            this.deptarr.push(obj)
          })
          setTimeout(() => {
            this.initData()
          }, 500)
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 初始化数据
    initData() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(this.$refs.main1)
      // 绘制图表
      myChart.setOption({
        title: {
          text: '科室床位预约统计报表', // 主标题
          x: 'center'// x轴方向对齐方式
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          bottom: 0,
          right: 20,
          type: 'scroll'
        },
        color: ['#1790cf', '#1bb2d8', '#99d2dd', '#88b0bb', '#1c7099', '#038cc4', '#75abd0', '#afd6dd'],
        series: [
          {
            name: '科室数据',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: this.deptarr.sort(function(a, b) { return a.value - b.value }),
            roseType: 'radius',
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function(idx) {
              return Math.random() * 200
            }
          }
        ]
      })
    },
    // 重置
    handlerReset() {
      this.getTime()
    },
    handerSearch() {
      this.getList()
    },
    _DownLoad() {
      const params = this.getListParams()
      getDeptUsedBedReportDtoExcel(params).then((res) => {
        // if (res.data.code === 200) {
        const blob = new Blob([res.data])
        const fileName = '科室床位预约统计' + '.xlsx'
        const URL = window.URL || window.webkitURL || window.moxURL
        if ('download' in document.createElement('a')) {
          // 非IE下载
          const elink = document.createElement('a')
          elink.download = fileName // 命名下载名称
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob) // 表示一个指定的file对象或Blob对象
          document.body.appendChild(elink)
          elink.click() // 点击触发下载
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
        } else {
          // IE10+下载
          navigator.msSaveBlob(blob, fileName)
        }
        // }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.form{
  display: flex;
  align-items: center;
  p{
    margin-right: 40px;
    color: #909399;
  }
}
</style>
